<template>
    <div class="page_bottom_warp">
        <n-popover trigger="hover" v-for="(item, index) in mediaList" :key="index">
            <template #trigger>
                <div :style="{ 'backgroundImage': `url(${item.iconSrc})` }" class="warp_item_icon"
                    @mouseover="changeIcon(index, true)" @mouseleave="changeIcon(index, false)"></div>
            </template>
            <div class="show_warp_image_box">
                <img :src="item.image" alt="" class="show_warp_image_">
            </div>
        </n-popover>
    </div>
</template>

<script setup>
import { NPopover } from 'naive-ui'
import { mediaList } from './data';

const changeIcon = (index, hover) => {
    mediaList[index].iconSrc = hover ? mediaList[index].hicon : mediaList[index].icon;
}
</script>

<style lang='less'>
.page_bottom_warp {
    display: none;

    .warp_item_icon {
        width: 30px;
        height: 30px;
        margin: 0 10px;
        transition: all .3s;
        border-radius: 50%;
        background-size: contain;

        &:hover {
            cursor: pointer;
        }
    }
}

.show_warp_image_box {
    display: flex;
    justify-content: center;

    .show_warp_image_ {
        width: 150px;
        height: 150px;
    }
}
</style>